<template>
  <div>
    <!--  标签内容  -->
    <el-row :gutter="24">
      <el-col :span="24" style="margin: auto">
        <div class="center">
          <el-card class="box-card">
            <div v-for="(item,index) in blogTags" :key="index" class="text item">
              <span class="tags" @click="handleTags(item)" v-text="item"></span>
            </div>
          </el-card>

        </div>

      </el-col>

      <!-- 下方文章内容     -->

      <el-card v-show="cardArticle" class="box-card">
        <el-row :gutter="24">
          <el-empty v-if="!cardArticle && blogs.length <=0"
                    description="暂时没有数据"
                    image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>

          <el-col class="card" :span="6" v-for="(item,index) in blogs" :key="index">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div>
                <div style="overflow: hidden">
                  <el-image style="width: 100%;  height: 280px;position: relative;" :src="item.articleCover"
                            :fit="'fit'" class="image">
                  </el-image>
                </div>
                <el-link :underline="false"><h4>{{ item.articleTitle }}</h4></el-link>
                <el-divider></el-divider>
              </div>
              <div>
                <div>
                  <span style="float: left;  font-size: 15px;  color: #9d9898;">
                    <el-tag type="success"> <i class="el-icon-price-tag"></i>{{ clickTag }}</el-tag>
                  </span>
                  <span style="float: right;  font-size: 15px;  color: #9d9898;">{{ item.articleClassify }}</span>
                </div>
                <br> <br> <br>
                <div class="bottom clearfix">
                  <time class="time">{{ item.createTime }}</time>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import {getBlogsByTagName, getBlogsTags} from "../../request/request";

export default {
  name: "UserBlogTags",
  data() {
    return {
      cardArticle: false,
      clickTag: '',

      blogTags: [],
      //指定的标签的文章
      blogs: [],
    }
  },

  methods: {
    /**
     * 根据标签名
     * @param value
     */
    handleTags(value) {
      this.clickTag = value

      this.cardArticle = true

      this.$request.getBlogsByTagName(this.$user, value).then((data) => {
        this.blogs = data.data
      })
    },

    getBlogsByTag(value) {

    },
  },
  accordion() {

  },
  created() {
    //todo 获取文章下面的标签
    this.$request.getBlogsTags(this.$user).then((data) => {
      this.blogTags = data.data
    })
  }

}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.card {
  margin-bottom: 10px;
}

.tags {
  width: 75px;
  height: 45px;
  display: block;
  cursor: pointer;
  margin: 15px;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 10px;
  justify-content: center;
}

.center {
  width: 100%;
  min-height: 330px;
  margin: auto;
  background-color: #ffffff;
  padding-top: 20px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  float: left;
  font-size: 23px;
  justify-content: center;
  align-content: center;

  text-align: center;
  line-height: 45px;
}

.box-card {
  width: 65%;

  margin: auto;
}
</style>
